<template>
    <view style="height: 100%">
        <!-- pages/home/home.wxml -->
        <!-- <view class="" :style="'height:' + statusBarHeight + 'px; background-color: #000;'"></view> -->

        <!-- 轮播图，指示点的位置 -->
        <view class="" style="background-color: #000">
            <swiper
                circular
                indicator-dots
                autoplay
                interval="3000"
                style="width: 100%; height: 460rpx; background-color: #000; overflow: hidden"
            >
                <swiper-item style="" v-for="(item, index) in articles" :key="index">
                    <image :src="item.cover" mode="htightFix" class="sweet"></image>
                </swiper-item>
            </swiper>
        </view>
        <view class="footer">
            <!-- 会员选项 -->
            <view class="footer-vip" @tap="myto">
                <image src="/static/image/vip/zhangyu.png"></image>
                <view class="footer-vip-name">
                    <view class="name">微雪花会员</view>
                    <!-- 进度条 -->
                    <view class="len"></view>
                    <!-- 介绍 -->
                    <view class="info">再升1级可享受【升级礼包】等6项权益</view>
                </view>
                <image class="img" src="/static/image/vip/vip.png"></image>
            </view>
            <!-- 定位 -->
            <view class=""></view>
            <!-- 点餐 -->
            <view class="foot-form"  @click="gotoOrder">
                <image class="img1" src="/static/image/vip/zhenzhunaicha.png" mode="widthFix"></image>
                <view class="foot-form-title">
                    <view class="name">立即点餐</view>
                    <text>手机点 到店取 免排队</text>
                </view>
                <image class="img2" src="/static/image/vip/dea9dfb034e5b044210bcfc8ae0c98b.png" mode="widthFix"></image>
            </view>
            <!-- 福利 -->
            <view class="convert-item">
                <view class="new item">
                    <view class="item-text">今天喝点啥</view>
                    <image src="../../static/image/icon_yk6ul1hd77l/xueren.png" mode="widthFix"></image>
                </view>
                <view class="Welfare item">
                    <view class="item-text">暑假福利包</view>
                    <image src="/static/image/icon_yk6ul1hd77l/xueren_1.png" mode="widthFix"></image>
                </view>
                <view class="convert item">
                    <view class="item-text">0元兑换</view>
                    <image src="/static/image/icon_yk6ul1hd77l/xueren_2.png" mode="widthFix"></image>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
// pages/home/home.js
import { getLoginCode,getOpenId } from "../../utils/wx-auth.js";
export default {
    data() {
        return {
            statusBarHeight: uni.db.statusbarhright,
            //电量栏高度
            articles: null
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {
        uni.request({
            url: 'https://www.fastmock.site/mock/68c3c014a443685834fb331ec92e7e9d/show/show',
            success: (res) => {
                // console.log(res.data.data[0].articles);
                this.setData({
                    articles: res.data.data[0].articles
                });
            }
        });
		this.login();

    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
		async login() {
		      uni.login({
		        provider: 'weixin',
		        success: function (loginRes) {
		          console.log(loginRes);
		          // 获取用户信息
		          uni.getUserInfo({
		            provider: 'weixin',
		            success: function (infoRes) {
		              console.log(infoRes);
		            }
		          });
		        }
		      });

		   },
        orderto() {
            uni.switchTab({
                url: '/pages/order/order'
            });
        },

        myto() {
            uni.switchTab({
                url: '/pages/my/my'
            });
        },
		
		gotoOrder(){
			uni.switchTab({
				url: '/pages/newoder/newoder'
			})
		},
    }
};
</script>
<style>
/* pages/home/home.wxss */
.sweet {
    width: 100%;
}
.footer {
    padding: 40rpx;
    position: relative;
    top: -75rpx;
}
.footer-vip {
    display: flex;
    justify-content: center;
    align-items: center;
    /* height: 200rpx; */
    background: rgb(255, 255, 255);
    border-radius: 30rpx;
    box-shadow: 0 0 30px 5px #ececec;
    padding: 10rpx 0;
}
.footer-vip image {
    width: 100rpx;
    height: 105rpx;
    margin: 30rpx;
}
.footer-vip-name {
    height: 105rpx;
    font-size: 20rpx;
    color: #b6b6b6;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}
/* 进度条 */
.footer-vip-name .len {
    width: 330rpx;
    height: 10rpx;
    background: rgb(235, 235, 235);
}
.footer-vip-name .name {
    font-size: 35rpx;
    color: #000000;
    font-weight: bold;
    flex: 1;
    position: absolute;
    top: 0;
}
.info {
    position: absolute;
    bottom: 0;
}

/* 点餐 */
.foot-form {
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 30px 5px #ececec;
    border-radius: 30rpx;
    padding: 10rpx 0;
    margin-top: 70rpx;
}
.foot-form .img1 {
    width: 200rpx;
    margin: 40rpx;
}
.foot-form-title {
    font-size: 20rpx;
    color: #a8a7a7;
    flex: 1;
}
.foot-form-title .name {
    font-size: 45rpx;
    color: #000000;
    font-weight: bold;
    margin-bottom: 20rpx;
}

.foot-form .img2 {
    width: 100rpx;
    border-radius: 50px;
    margin: 40rpx;
}
.convert-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20rpx;
}
.item {
    height: 150rpx;
    width: 250rpx;
    margin: 10rpx;
    border-radius: 30rpx;
    box-shadow: 0 0 30rpx 5rpx #e9e7e7;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    text-align: center;
}
.item-text {
    margin-top: 10rpx;
    font-weight: bold;
}
.item image {
    width: 80rpx;
    position: relative;
    left: 110rpx;
    top: 15rpx;
}
</style>
